<template>
    <h-section :title="disabled ? '原始需求' : '业务需求'" collapse>
        <template #titleExtra>
            <flexbox class="extra-cont">
                <a-dropdown :trigger="['click']" v-if="!disabled">
                    <div class="ant-dropdown-link" @click.stop>
                        标准模板
                        <DownOutlined />
                    </div>
                </a-dropdown>
            </flexbox>
        </template>
        <div>
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="需求标题" name="requestName" v-if="!disabled">
                            <a-textarea v-model:value="form.requestName" placeholder="请输入需求标题限制200个字" :maxlength="200" auto-size />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="需求类型" name="requestType">
                            <div style="width: 100%">
                                <span v-if="disabled">
                                    {{ $filters.valToNameFilter('requestType', form.requestType) }}
                                </span>
                                <a-select placeholder="请选择" v-model:value="form.requestType" v-else>
                                    <a-select-option v-for="item of dicOptions.requestType" :key="item.code">
                                        {{ item.dimensionName }}
                                    </a-select-option>
                                </a-select>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="期望完成日期">
                            <div style="width: 100%">
                                <span>{{ $filters.dateFilter(form.expectTime) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="数据来源" name="source">
                            <div style="width: 100%">
                                <span>{{ $filters.valToNameFilter('source', form.source) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="优先级">
                            <div v-if="disabled">
                                <h-level :level="form.level" v-if="form.level" />
                            </div>
                            <a-select placeholder="请选择" v-model:value="form.level" v-else>
                                <a-select-option v-for="item of dicOptions.level" :key="item.code">
                                    {{ item.dimensionName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="发起人" class="createUser-cont">
                            <div style="width: 100%">
                                <span class="text">
                                    {{ form.initiator }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="发起人部门">
                            <span>{{ form.initiatorDept }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="标签">
                            <HSearchMultiSelectCell
                                type="systemLabel"
                                label="name"
                                valueLabelField="name"
                                keyField="name"
                                isSupportEnter
                                :default-value="form.pmpLabels"
                                :disabled="!form.requestSystem"
                                :searchQuery="{ systemId: form.requestSystem, type: 2 }"
                                @success="handleSelectChange($event, 'label')"
                                v-if="canEditLabel"
                            />
                            <div v-else>
                                <flexbox wrap="wrap" v-if="form.pmpLabels">
                                    <a-tag color="blue" style="margin-bottom: 2px" v-for="item of form.pmpLabels" :key="item.id">
                                        {{ item.name }}
                                    </a-tag>
                                </flexbox>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="负责人">
                            <span>{{ form.responsibleName }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="负责团队">
                            <span>{{ form.responsibleDept }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="团队长">
                            <span>{{ form.responsibleDeptHeader }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="rat需求编号">
                            <span>{{ form.ratNumber }}</span>
                        </a-form-item>
                    </a-col>

                    <a-col :span="24">
                        <a-form-item label="需求描述" name="requestDesc">
                            <div v-html="form.requestDesc" v-if="disabled" class="desc-content" />
                            <div style="position: relative" v-else>
                                <t-editor v-model="form.requestDesc" />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="文档">
                            <file-cell v-if="disabled" :fileList="form.selfRequestFiles" />
                            <upload-cell
                                :fileList="form.selfRequestFiles"
                                :fileParams="{ connectType: modelName, type: 0 }"
                                @valueChange="fileChange"
                                v-else
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </h-section>
</template>

<script lang="ts">
import { UploadCell, FileCell, HLevel, HSearchMultiSelectCell } from '@/components';
import { DownOutlined } from '@ant-design/icons-vue';
import { useTaskFormData, useCreateTaskForm } from '@/views/taskRequire/createTaskRequire/hooks';
import store from '@/store';
import { defineComponent, ref, unref, computed, nextTick, onMounted, getCurrentInstance, watch, defineAsyncComponent } from 'vue';
export default defineComponent({
    name: 'FirstRequire',
    components: {
        HLevel,
        FileCell,
        TEditor: defineAsyncComponent(() => import('@/components/TEditor/index.vue')),
        HSearchMultiSelectCell,
        DownOutlined,
        UploadCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        modelName: { type: String, default: '' },
        isHistoryModal: { type: Boolean, default: false }
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const { form, setForm } = useTaskFormData();
        const { fileChange, handleSelectChange } = useCreateTaskForm(setForm, props.detail);
        const ruleFormRef = ref<any>();
        const rules = computed(() => {
            const rules = {
                requestName: [{ required: true, message: '需求标题不能为空', trigger: 'blur' }],
                requestType: [{ required: true, message: '需求类型不能为空', trigger: 'blur' }],
                requestDesc: [{ required: true, message: '需求描述不能为空', trigger: 'blur' }]
            };
            return props.disabled ? {} : rules;
        });
        const canEditLabel = computed(() => {
            if (props.isHistoryModal || props.detail.status === '5') {
                return false;
            } else if (unref(form).agentUser === store.getters.userInfo.employeeDTO.empId) {
                if (props.detail.relateId) {
                    return false;
                } else {
                    if (+props.detail.stage >= 4 && props.detail.isSplit === '是') {
                        return props.detail.relateRequest > 0 ? true : false;
                    } else {
                        return true;
                    }
                }
            } else {
                return false;
            }
        });
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            resolve(true);
                        },
                        () => {
                            resolve(false);
                        }
                    );
            });
        };
        const init = () => {
            Object.keys(unref(form)).forEach((key) => {
                if (key === 'selfRequestFiles') {
                    if (props.detail.selfRequestFiles) {
                        if (props.disabled) {
                            setForm({
                                selfRequestFiles: props.detail.selfRequestFiles.filter(
                                    (item) => item.connectType === props.modelName || item.connectType === '发起需求'
                                )
                            });
                        } else {
                            setForm({
                                selfRequestFiles: props.detail.selfRequestFiles.filter((item) => item.connectType === props.modelName)
                            });
                        }
                    }
                } else {
                    setForm({
                        [key]: props.detail[key]
                    });
                }
            });
        };
        init();
        watch(() => props.detail, init, {
            deep: true
        });
        onMounted(() => {
            // 找出所有图片，并添加放大手势
            nextTick(() => {
                document.querySelectorAll('#requestDesc img').forEach((item: any) => {
                    if (item.height > 350) {
                        item.width = ~~((item.width * 350) / item.height);
                        item.style.height = '350px';
                    }
                    item.addEventListener('click', () => {
                        instance.proxy.$mitt.emit('previewImg', item.src);
                    });
                    item.style.cursor = 'zoom-in';
                });
            });
        });
        return {
            ruleFormRef,
            rules,
            form,
            canEditLabel,
            validate,
            fileChange,
            handleSelectChange
        };
    }
});
</script>
<style lang="less">
.extra-cont {
    margin-left: 12px;
}
</style>
